<template>
    <div class="dataTrees">
        <Tree :data="dataTrees"></Tree>
        <div class="clear" style="clear: both;"></div>
    </div>
</template>


<script>
    import { getfunMenuApi} from '../../../http/functionView.api'

    export default {
        name: 'functionTree',
        data () {
            return {
                spinShow: false,
                dataTrees: []
            }
        },
        created () {
            this.spinShow = true

            //没有二级菜单
            getfunMenuApi().then(suc => {
                console.log(suc)
                function buildTree(tree) {
                    return {
                        title: tree.name,
                        expand: true,
                        children: tree.menuLists.map((item) => getNode(item))
                    }
                }
                function  getNode(item) {
                    let obj = {
                        title: item.name,
                        expand: true,
                        originVal: item
                    };
                    if (item.menuLists&&item.menuLists.length) {
                        obj.children = item.menuLists.map((item1) => getNodes(item1)); //getNode(item1)没有二级菜单
                    }
                    return obj;
                }
                //有二级菜单
                function  getNodes(item1) {
                    let obj = {
                        title: item1.name,
                        expand: true,
                        originVal: item1
                    };
                    if (item1.menuItems&&item1.menuItems.length) {
                        obj.children = item1.menuItems.map((item2) => ({title: item2.name+(item2.desc?"（"+item2.desc+"）":"")}));
                    }
                    return obj;
                }
                this.dataTrees = suc.data.result.map(tree => buildTree(tree))
                this.spinShow = false
            }).catch(err => {
                this.$Message.error("错误代码【"+err.data.code+"】，"+err.data.message)
                this.spinShow = false
            })
        },
        methods:{
        }
    }
</script>
<style>
.ivu-tree-children li{
    line-height: 30px;
    position: relative;
}
.ivu-tree ul li{
    margin: 0
}
.dataTrees .ivu-tree-children .ivu-tree-children .ivu-tree-title{
    display: table;
}
.ivu-tree-arrow{
    position: relative;
}
.ivu-tree-arrow i{
    top:10px;
}
</style>
